<template>
  <div class="recommend">
    <div class="title">今日推荐</div>
    <div class="content" @click="detailCook(recommendData.id)">
      <div class="pic">
        <img :src="recommendData.image" alt="">
      </div>
      <div class="msg">
        <p>{{ recommendData.name }}</p>
        <span>鲜嫩多汁，色香味俱全。</span>
        <div class="other">
          <div>
            <i class="iconfont icon-shijian"></i>{{ recommendData.time }}分钟
          </div>
          <div class="difficulty">
            <i class="iconfont icon-shoucang"></i>难度：中等
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getRecommendDaily, getCookByHome } from '@/api';
import { getLast24HourRange } from '@/utils/getLast24HourRange.js';
import router from '@/router/index.js';

const recommendData = ref({})

const fetchRecommendation = async () => {
  const HoursRange = getLast24HourRange()
  // 这里应该是你获取数据的逻辑，例如调用 API
  let res = await getRecommendDaily(HoursRange)
  if (res.data) {
    recommendData.value = res.data
  } else {
    res = await getCookByHome()
    recommendData.value = res.data[0]
  }
}

// 设置定时任务的函数
const setDailyRecommendation = () => {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  // 计算距离今天早上8点还有多少毫秒
  const today8 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 8, 0, 0);

  let timeout = today8 - now;

  if (hours >= 8) {
    // 如果当前时间已经超过早上8点，则设置定时任务为明天的早上8点
    timeout += 24 * 60 * 60 * 1000; // 加上一天的时间
  }

  setTimeout(async () => {
    await fetchRecommendation(); // 执行获取推荐数据的函数
    // 设置每天执行一次
    setInterval(fetchRecommendation, 24 * 60 * 60 * 1000);
  }, timeout);
};

onMounted(async () => {
  await fetchRecommendation();   // 先立刻请求一次数据
  setDailyRecommendation()
});

const detailCook = (index) => {
  router.push({ name: 'detailCook', query: { id: index } })
}
</script>


<style lang="less" scoped>
.recommend {
  padding: 15px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;

  .title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    line-height: 28px;
  }

  .content {
    display: flex;

    .pic {
      width: 3.2rem;
      height: 3.2rem;

      img {
        width: 100%;
        border-radius: 10px;
      }
    }

    .msg {
      margin: 0.55rem 0.4rem;

      p {
        font-weight: 600;
        font-size: 16px;
        color: #000000;
      }

      span {
        margin: 8px 0;
        display: block;
        font-weight: 400;
        font-size: 14px;
        color: #4B5563;
        line-height: 0.54rem;
      }

      .other {
        display: flex;
        color: #6B7280;
        height: 0.67rem;
        line-height: 0.67rem;

        .difficulty {
          margin-left: 18px;

          .iconfont {
            font-size: 16px;
          }
        }

        .iconfont {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>